<style lang="less">
@import "./productDetail.less";
</style>
<template>
  <div class="body">
    <div class="container-product">
      <div class="product-control shadow-xl">
        <product-filter :state="brief"></product-filter>
      </div>
      <!-- style="background-color:skyblue" -->
      <div class="product-main">
        <div class="product-detail-content">
          <visaPicture :urlState="product.visa_page"></visaPicture>
          <handleProcess :state="product.handle_process"></handleProcess>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  ref,
  computed,
  toRefs,
  getCurrentInstance,
  reactive,
  onBeforeMount,
  onMounted,
  defineAsyncComponent
} from 'vue'
export default {
  name: "productDetails",
  components: {
    productFilter:defineAsyncComponent(() => import('@/components/global/productFilter')),
    handleProcess: defineAsyncComponent(() => import('@/components/productComponent/handleProcess')),
    visaPicture:defineAsyncComponent(()=>import('@/components/productComponent/visaPicture'))
  },

  setup() {
    const {
      appContext
    } = getCurrentInstance();
    const api = appContext.config.globalProperties.api;

    const params = reactive({
      briefParams: {
        province_code: '530000',
        visa_country_id: '10003'
      },
      productParams: {
        visa_product_id: '14520'
      }
    });
    const returnState = reactive({
      brief: {},
      product: {},
      list: []
    })
    const getBriefList = async () => {
      let {
        body
      } = await api.post('/sys/visa_product_brief_query', params.productParams);
      returnState.brief = body;
    }
    const getProductList = async () => {
      let {
        body
      } = await api.post('/sys/visa_product_query', params.briefParams);
      returnState.product = body;

    }
    getBriefList();
    getProductList();
    onBeforeMount(() => {
    })
    onMounted(() => {
      
    })
    return {
      ...toRefs(returnState)
    }
  },
};
</script>
<route lang="yaml">
meta:
  level: 1
  name: "productDetail"
  str: "产品详情"
  layout: default
</route>
